<template>
  <div class="my-cholice">
    <div class="container">
      <p class="title title_color">{{t('My choice')}}</p>
      <div class="search-container" @click="goSearchPage">
        <div class="search-msg">{{t('Search')}}</div>
        <div class="search-icon">
          <svg data-v-30a7f5d9="" aria-hidden="true" class="search1 svg-icon">
            <use data-v-30a7f5d9="" xlink:href="#icon-search1"></use>
          </svg>
        </div>
      </div>
      <div class="hot-container">
        <div class="hot-container—title">
          <p class="title_color">{{t('Market')}}</p>
        </div>
        <template v-for="e in stockList" :key="e.id">
          <div  class="hot-container-item" @click="go(e)">
            <div  class="hot-content-value">
              <div  class="hot-content-value-item-m">
                <div  class="hot-content-value-item-m-t">{{ e.name }}</div>
                <div  class="hot-content-value-item-m-b">{{ e.ticker }}</div>
              </div>
              <div  class="hot-content-value-item-r">
                <div  class="hot-content-value-item-r-t">{{ e.close }}</div>
                <div
                  class="hot-content-value-item-r-b"
                  :class="e.rate < 0 ? 'lower' : 'upper'"
                >
                  {{e.rate > 0 ? '+' : ''}}{{ e.rate }}%
                </div>
              </div>
            </div>
          </div>
        </template>
        <div  class="empty" style="width: 80%;margin: 20px auto;" v-if="!stockList.length">
          <img
            style="width: 100%"
            src="@/assets/images/No-records_03.df9abc64.png"
            alt=""
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted } from 'vue'
import { useRouter } from "vue-router";
import { get, post } from '@/utils/request'
import { showLoadingToast, closeToast } from 'vant'
import { t } from '@/languages'
const $router = useRouter();
const stockList = ref([])


function handleFunc(path) {
  $router.push({ path });
}
function go(e){
  $router.push({
    path: "/marketDetails",
    query: {
      ...e
    }
  });
}

function goSearchPage () {
  $router.push("/myChoice/search");
}

async function getMyChoiceList() {
  try {
    showLoadingToast()
    const res = await post('/api/app/fstocks/')
    const list = res || []
    stockList.value = list.map((e) => {
      return {
        ...e,
        rate: ((e.close - e.open) / e.open).toFixed(2)
      }
    })
    closeToast()
  } catch (error) {
    console.log(error)
    closeToast()
  }
}


onMounted(() => {
  getMyChoiceList()
})
</script>

<style lang="scss" scoped>
.container {
  padding: 0.53333rem 0.26667rem;
  padding-bottom: 2.13333rem;
}

.container .title {
  font-size: 0.64rem;
  font-weight: 600;
  margin-bottom: 0.53333rem;
}

.container .search-container {
  padding: 0 0.26667rem;
  width: 100%;
  height: 1.06667rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 2.13333rem;
  background: transparent;
  border: 0.02667rem solid #62f792;
}

.container .search-container .search-msg {
  color: #349a83;
}

.container .search-container .search-icon .search1 {
  width: 0.88rem;
  height: 0.88rem;
}

.container .hot-container {
  border: 0.02667rem solid #2b4e5a;
  border-radius: 0.10667rem;
  margin-top: 0.8rem;
}

.container .hot-container .hot-container—title {
  background: #0f3a40;
  padding: 0.26667rem;
}

.container .hot-container .hot-container—title P {
  font-size: 0.48rem;
  font-weight: 600;
}

.container .hot-container .hot-content-head {
  font-weight: 700;
  color: #fff;
  padding: 0.53333rem 0;
}

.container .hot-container .hot-container-item {
  margin-bottom: 0.26667rem;
  background-color: transparent;
  padding: 0.26667rem 0.13333rem;
  border-radius: 0.26667rem;
  box-shadow: 0 0.16rem 0.8rem 0.13333rem rgba(0, 0, 0, 0.12);
}

.container .hot-container .hot-content-value {
  display: flex;
  justify-content: space-between;
  border-bottom: 0.02667rem dotted #2b4e5a;
  padding-bottom: 0.26667rem;
}

.container
  .hot-container
  .hot-content-value
  .hot-content-value-item-l
  .hot-content-value-item-l-container {
  width: 1.28rem;
  height: 1.28rem;
  border-radius: 50%;
  background: #47c086;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container
  .hot-container
  .hot-content-value
  .hot-content-value-item-l
  .hot-content-value-item-l-container
  .down {
  width: 0.66667rem;
  height: 0.66667rem;
}

.container .hot-container .hot-content-value .hot-content-value-item-m {
  flex: 4;
  flex-shrink: 0;
  padding-left: 0.53333rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.container
  .hot-container
  .hot-content-value
  .hot-content-value-item-m
  .hot-content-value-item-m-t {
  color: #fff;
  font-size: 0.42667rem;
  font-weight: 700;
  line-height: 0.53333rem;
}

.container
  .hot-container
  .hot-content-value
  .hot-content-value-item-m
  .hot-content-value-item-m-b {
  margin-top: 0.13333rem;
  color: #999;
  font-size: 0.32rem;
}

.container .hot-container .hot-content-value .hot-content-value-item-r {
  flex: 1;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}

.container
  .hot-container
  .hot-content-value
  .hot-content-value-item-r
  .hot-content-value-item-r-t {
  margin-bottom: 0.13333rem;
  color: #62f792;
  font-size: 0.42667rem;
  font-weight: 700;
  line-height: 0.53333rem;
}

.container
  .hot-container
  .hot-content-value
  .hot-content-value-item-r
  .hot-content-value-item-r-b {
  padding: 0.05333rem;
  font-size: 0.32rem;
  border-radius: 0.16rem;
  
}
</style>
